<template>
    <div>
        <div class="home" :style="styles">
            <div class="title">
                <span>{{project_title}}</span>   
                <div class="btn" @click="$router.go(-1)"><el-button type="primary" icon="el-icon-arrow-left">返回</el-button></div> 
            </div>
        
            <div class="box">
                <!-- 左 -->
                <div class="leftBox"  style="width:70%;">
                    <!-- 步骤图片展示 -->
                    <DutyPeople :info="info" @clickStep="clickStep" :apiHost="apiHost" :device_name="device_name"/>
                  
                   
                </div>
                <!-- 右 -->
                <div class="leftBox" style="width:30%;">
                    <!-- 备件信息 -->
                    <LineOrder :info="activeItem" />
                 
                     <!-- 安装后效果 -->
                     <Improve :info="activeItem" :apiHost="apiHost"/>
                </div>
            </div>
            
        </div>
        
    </div>
</template>

<script>

import DutyPeople from "./infoModel/DutyPeople"
import Improve from "./infoModel/Improve"
import LineOrder from "./infoModel/LineOrder"
import axios from "axios"

     export default {
        components:{
            DutyPeople,
            Improve,
            LineOrder,
        },
        data() {
        return {
            styles:{
                "width":"1920px",
                "transform-origin": "left top 0px",
                "transform": "scale(1, 1)",
                "transition": "none 0s ease 0s",
                "position": "relative",
                "overflow": "initial",
            },
            info:[],
            // sop
            project_title: '', // 项目名称
            device: '1', // 设备id
            activeItem: {}, // 选中当前步骤信息
            apiHost: "http://localhost:9984/dev-api",
            device_name: '', // 设备名称
            };
        },
        created(){
            // 获取参数
            this.project_title = this.$route.query.project
            this.device = this.$route.query.device
            this.device_name = this.$route.query.device_name
            this.onClienWidth()
            this.get_api()
        },
        mounted(){
            
        },
        methods: {
            onClienWidth(){
                let width = document.body.clientWidth / parseInt(this.styles.width)
                this.styles.transform = `scale(${width}, ${width})`
                window.onresize = ()=>{
                    let width = document.body.clientWidth / parseInt(this.styles.width)
                    this.styles.transform = `scale(${width}, ${width})`
                }
                document.onkeydown = function(e) {
                        if (e.keyCode == 123) return false
                }
                document.oncontextmenu = function() {
                    return false
                }
            },

            get_api(){
                axios.post('http://localhost:9984/dev-api/sop/manage/listChild',{device:this.device}).then(res=>{
                    let data =  res.data.data.sort((item1,item2)=> { return item1.orderNum - item2.orderNum })
                    // 过滤状态为0的
                    this.info = data.filter(item => item.status == 0)
                })
            },

            // 点击步骤
            clickStep(item){
                this.activeItem = item
            }
        },
        
    }
</script>

<style lang="scss" scoped>
.home{
    background: #000;
}
.btn{
    position: absolute;
    top: 23px;
    left: 19px;
    .el-button--primary{
        background: #223043;
        border-color: #006dff;
        color: #1d84d5;
    }
}
.title{
    font-weight: 700;
    color :"#fff";
    font-size: 18px;
    line-height: 32px;
    background-image: url(../assets/title_bg.png);
    background-repeat: no-repeat;
    background-position: -100px bottom;
    // -webkit-background-size: 100% 20px;
    // background-size: 100% 20px;
    height :70px;
    // margin-top: 6px;
    margin-bottom: 10px;
    background-size: 110%;
    color: #fff;
    

}
.title span{
    background-image: -webkit-linear-gradient(bottom, #1fb9fc, #1d80d2, #1850a7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    font-size: 30px;
    line-height: 40px;
    padding: 10px 0;
    letter-spacing: 10px;
    display: block;
    color: #fff;
}

.box{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
// 左
.leftBox{
    width: 450px;
    display: flex;
    padding: 0 20px;
    width: 100%;
    min-height:1000px;
    box-sizing: border-box;
    box-sizing: content-box;
    flex-wrap: wrap;
}

.textKey{
    text-align: left;
    font-weight: bold;
}

.dialog-footer{
    display: flex;
    justify-content: space-around;
}

</style>

<style lang="scss">
.lignBg{
    flex: 1;
    background-color: #051028;
    border: 1px solid rgba(2,203,255,0.1);
    box-shadow: 0 0 10px rgba(180,203,255,0.1);
    position: relative;
    padding: 10px 20px;
    animation: shadowShine linear infinite 4s;
}
.light-corner{
    content: '';
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    &:nth-of-type(1){
        top: 0;
        left: 0;
        border-top: 2px solid #02cbff;
        border-left: 2px solid #02cbff;
        -webkit-border-radius: 2px 0 0 0;
        -moz-border-radius: 2px 0 0 0;
        border-radius: 2px 0 0 0;
    }
    &:nth-of-type(2){
        top: 0;
        right: 0;
        border-top: 2px solid #02cbff;
        border-right: 2px solid #02cbff;
        -webkit-border-radius: 0 2px 0 0;
        -moz-border-radius: 0 2px 0 0;
        border-radius: 0 2px 0 0;
    }
    &:nth-of-type(3){
        bottom: 0;
        left: 0;
        border-bottom: 2px solid #02cbff;
        border-left: 2px solid #02cbff;
        -webkit-border-radius: 0 0 0 2px;
        -moz-border-radius: 0 0 0 2px;
        border-radius: 0 0 0 2px;
    }
    &:nth-of-type(4){
        bottom: 0;
        right: 0;
        border-bottom: 2px solid #02cbff;
        border-right: 2px solid #02cbff;
        -webkit-border-radius: 0 0 2px 0;
        -moz-border-radius: 0 0 2px 0;
        border-radius: 0 0 2px 0;
    }
}
</style>